<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="perm" uri="/WEB-INF/tld/perm.tld"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
	<script>var ctx="${ctx}";</script>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Mr Cargo管理平台</title>
	    <meta name="keywords" content="体验,友好,高级管理台,易用,高性能,高扩展性,bootstrap框架,响应式后台">
	    <meta name="description" content="这是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
	    <meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="Wed, 26 Feb 209908:21:57 GMT"> 
	    <!--[if lt IE 8]>
	    <meta http-equiv="refresh" content="0;ie.html" />
	    <![endif]-->
	    <link rel="shortcut icon" href="favicon.ico"> 
		<link rel="shortcut icon" href="favicon.ico"> 
		<link href="${ctx}/static/css/bootstrap.min.css?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/css/font-awesome.min.css?v=4.4.0?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/css/plugins/chosen/chosen.css?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/css/animate.min.css?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/css/style.min.css?v=4.0.0" rel="stylesheet">
	    
	</head>
	<body class="gray-bg" id="sysRole_body">
    	<div class="ibox float-e-margins">
    		<div class="ibox-content">
    			<div class="row" style="padding-right: 30px;">
    				<div class="col-md-2 col-sm-3" id="tabVisibleRoles">
    					
    				</div>
       				<div class="col-md-10 col-sm-10">
       					<div class="row"  style="padding-right: 30px;padding-left: 30px;">
		    				 <h3 style="color:red;font-weight:bold;">提示:授权打钩的是不显示的, 没有授权打钩的就是要显示的</h3>
							 <a  onclick="clickInsertTableGet()" class="btn btn-block btn-outline btn-primary">添加视图</a>
		    				 <div id="tableContent">
		    				 </div>
		    			</div>
					</div>
    			</div>
			</div>
		</div>
		
	<script src="${ctx}/static/js/jquery.min.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/bootstrap.min.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/plugins/chosen/chosen.jquery.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/eModal.min.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/cookie.js?v=?v=${static_version}""></script>
	<script src="${ctx}/static/js/content.min.js?v=${static_version}"></script>
	<script src="${ctx}/static/common/common.js?v=${static_version}"></script>
	
	<script>
	
		var roleId;
	
		var onClickEvent=function(){
			$("#tabVisibleRoles li").click(function(){
				if($(this).data("id")=="" || $(this).data("id")==null){
					return false;
				}
				clickMe=$(this);
				$(this).addClass('active').siblings().removeClass('active');
				roleId=$(this).data("id");
				loadTableContent(roleId);
			})
		}
	
	    var loadAjaxTree=function(){
	    	$.ajax({  
				url:'${ctx}/role/list',  
				type: 'POST',
				dataType:'json',  
				success:function(response){
					var data=response.data;
					var html=[];
			    	html.push('<ul class="list-group" style="margin-top:60px">');
			    	html.push('<li class="list-group-item" data-id=""  style="color:red;text-align:center;font-weight:bold;">点击下面角色进行显示设置</li>');
					for(var j=0;j<data.length;j++){
			    	   html.push('<li class="list-group-item" data-id="'+data[j].id+'">'+data[j].name+'</li>');
					}
					html.push('</ul>');
					$("#tabVisibleRoles").html(html.join(""));
					onClickEvent();
				}  
		    });
		}
	    
	    var loadTableContent=function(roleId){
	    	$.ajax({  
				url:'${ctx}/tbVisible/list',  
				type: 'POST',
				dataType:'json', 
				data:{"roleId":roleId||""},
				success:function(response){
					var allTable=response.data.allTable;
					var allTableNames=response.data.allTableNames;
					var tableData=response.data.data;
					var tableIdList=response.data.tableIds;
					var html=[];
					for(var j=0;j<allTable.length;j++){
						var tableName=allTable[j];
						var tableCnName=allTableNames[tableName];
						var table=tableData[tableName];
						var tableIds=tableIdList[tableName];
						
						var ids=[];
						for(var i=0;i<table.length;i++){
							var clo=table[i];
							if(clo.checked){
								ids.push(clo.id); 
							}
						} 
						
						if(j%2==0){
							html.push('<div class="row" style="margin-bottom:30px;">');
						}
						html.push('<div class="col-sm-6">');
						html.push('<span>'+tableCnName+'('+tableName+')</span><div class="pull-right" style="display:inline-block">');
						<perm:hasPermission code="tbVisible/insertGet">
						if(roleId){
							html.push('<button onclick="clickInsertRoleGet(this)" data-id="'+tableIds+'" data-ids="'+ids.join(",")+'"  data-table-name="'+tableName+'" type="button" class="btn btn-primary btn-xs">设置角色权限</button>');
						}
				  	 	</perm:hasPermission>
						
						html.push('<button onclick="clickInsertGet(this)"  style="margin-left:3px"  data-id="'+tableIds+'"  data-table-name="'+tableName+'" type="button" class="btn btn-primary btn-xs">添加视图列</button></div>');
						html.push('<table class="table" id="'+tableName+'" data-table-name="'+tableName+'">');
						html.push('<thead>');
						html.push('<tr>');
						html.push('<th >视图列名称</th>');
						html.push('<th >视图列描述</th>');
						<perm:hasPermission code="tbVisible/insertGet">
						if(roleId){
							html.push('<th >不显示列</th>');
						}
						</perm:hasPermission>
						<perm:hasPermission code="tbVisible/delete">
						html.push('<th >操作</th>');
				  	 	</perm:hasPermission>
						html.push('</tr>');
						html.push('<tbody>');
						
						for(var i=0;i<table.length;i++){
							var clo=table[i];
							html.push('<tr>');
							html.push('<td>'+clo.cloName+'</td>');
							html.push('<td>'+clo.cloDesc+'</td>');
							<perm:hasPermission code="tbVisible/insertGet">
							if(roleId){
								if(clo.checked){
									html.push('<td><input class="mycheckbox" type="checkbox" data-id="'+clo.id+'" checked="checked"></td>');
								}else{
									html.push('<td><input class="mycheckbox"  type="checkbox" data-id="'+clo.id+'" ></td>');
								}
							}
							</perm:hasPermission>
							html.push('<td>');
							<perm:hasPermission code="tbVisible/delete">
							html.push('<button data-title="删除" onclick="deleteAjax(this)" style="margin-left:3px;margin-top:3px"  data-url="${ctx}/tbVisible/delete"  data-id="'+clo.id+'" type="button" class="btn btn-primary btn-xs">删除</button>');
					  	 	</perm:hasPermission>
					  	 	<perm:hasPermission code="tbVisible/update">
							html.push('<button data-title="更新" onclick="clickUpdateGet(this)" style="margin-left:3px;margin-top:3px"  data-url="${ctx}/tbVisible/update"  data-id="'+clo.id+'" type="button" class="btn btn-primary btn-xs">更新</button>');
					  	 	</perm:hasPermission>
					  	 	html.push('</td>');
							html.push('</tr>');
						}  
						html.push('</tbody>');
						html.push('</table>');
						html.push('</div>');
						if(j%2==1){
							html.push('</div>');
						}
					}
					$("#tableContent").html(html.join(""));
				}  
		    });
	    }
	    
		$(function(){
			
			loadAjaxTree();
			
			loadTableContent();
		})
		
		var clickInsertRoleGet=function(me){
			
			var removeVisibleIds=[];
			var insertVisibleIds=[];
			
			var ids=$(me).data("ids")+"";
			
			var selectedElms=[];
			if(ids.indexOf(",")>=0){
				selectedElms=ids.split(",");
			}else{
				selectedElms.push(ids);
			}
			
			var checkAllIds=[];
           	$("#" + $(me).data("table-name") + " input:checkbox[class=mycheckbox]:checked").each(function() {
       	        checkAllIds.push($(this).data("id"));
           	});
           	
			//确定是新增加的
			$.each(selectedElms, function() {
				var sid=this;
				var hasVales=false;
				for(var i=0;i<checkAllIds.length;i++){  
		            if(sid==checkAllIds[i]){  
		            	hasVales= true;
		            }  
		        } 
				if(!hasVales){
					removeVisibleIds.push(sid);
				}
    		});
			
			for(var i=0;i<checkAllIds.length;i++){ 
				var hasVales=false;
				for(var j=0;j<selectedElms.length;j++){  
	                if(selectedElms[j]==checkAllIds[i]){  
	                	hasVales=true;
	                }  
	            } 
				if(!hasVales){
					insertVisibleIds.push(checkAllIds[i]);
				}
            } 
			
			
			$.ajax({  
				url:'${ctx}/tbVisible/updateVisible',  
				type: 'POST',
				dataType:'json',
				data:{
					"roleId":roleId,
					"removeVisibleIds":removeVisibleIds.join(","),	
					"insertVisibleIds":insertVisibleIds.join(","),	
				},
				success:function(response){
					if(response.code==0){
						$.confirm({cancelButton: "关   闭",title:'提示!',text:"修改视图数据成功!"});	 
					}else{
					    $.confirm({cancelButton: "关   闭",title:'提示!',text:"修改视图数据错误!"});
					}
				}  
		    });
		}
		
		var clickInsertGet=function(me){
			$("#tableContent").data("table-name",$(me).data("table-name"));
			eModal.ajax({
	   	        url: "${ctx}/tbVisible/insertGet",
	   	        title:'添加视图列',
	   	        loading:true,
	   	     	useBin:true,
	   	        size: eModal.size.xm,
	   	        buttons: [
	   	            {text: '保存', style: 'info', close: false, click:function(){
	   	            	jQuery.checkall(false);
	   	            	var	tableNameStr=$("#tableNameSelect").val();
	   	            	var	tableNameEn=tableNameStr.split(",")[0];
	   	            	var	tableNameCn=tableNameStr.split(",")[1];
	   	            	$.ajax({  
		   	 				url:'${ctx}/tbVisible/add',  
		   	 				type: 'POST',
		   	 				dataType:'json',
		   	 				data:{
		   	 					"tableEnName":tableNameEn,
		   	 				    "tableCnName":tableNameCn,
		   	 					"cloName":$("#cloName").val(),
		   	 					"cloLable":$("#cloLable").val(),
		   	 					"cloDesc":$("#cloDesc").val()
		   	 				},
		   	 				success:function(response){
		   	 					if(response.code==0){
		   	 						eModal.close();	
		   	 						loadTableContent(roleId);
		   	 					}else{
		   	 					    $.confirm({title: '提示!',text:"添加视图列错误!"});
		   	 					}
		   	 				}  
		   	 		    }); 
	   	            }},{text: '取消', style: 'danger', close: false, click:function(){
	   	            	eModal.close();
	   	            }}
	   	        ],
	   	    });
		}
		
		var clickUpdateGet=function(me){
			eModal.ajax({
	   	        url: "${ctx}/tbVisible/updateGet?id="+$(me).data("id"),
	   	        title:'修改视图列',
	   	        loading:true,
	   	     	useBin:true,
	   	        size: eModal.size.xm,
	   	        buttons: [
	   	            {text: '保存', style: 'info', close: false, click:function(){
	   	            	$.ajax({  
		   	 				url:'${ctx}/tbVisible/update',  
		   	 				type: 'POST',
		   	 				dataType:'json',
		   	 				data:{
		   	 					"id":$("#id").val(),
		   	 					"cloName":$("#cloName").val(),
		   	 					"cloLable":$("#cloLable").val(),
		   	 					"cloDesc":$("#cloDesc").val()
		   	 				},
		   	 				success:function(response){
		   	 					if(response.code==0){
		   	 						eModal.close();	
		   	 						loadTableContent(roleId);
		   	 					}else{
		   	 					    $.confirm({title: '提示!',text:"修改修改视图列错误!"});
		   	 					}
		   	 				}  
		   	 		    }); 
	   	            }},{text: '取消', style: 'danger', close: false, click:function(){
	   	            	eModal.close();
	   	            }}
	   	        ],
	   	    });
		}
		
		var clickInsertTableGet=function(me){
			eModal.ajax({
	   	        url: "${ctx}/tbVisible/insertTableGet",
	   	        title:'添加数据表',
	   	        loading:true,
	   	     	useBin:true,
	   	        size: eModal.size.xm,
	   	        buttons: [
	   	            {text: '保存', style: 'info', close: false, click:function(){
	   	            	jQuery.checkall(false);
	   	            	$.ajax({  
	   	     			url:'${ctx}/tbVisible/insertTableName',  		 					
	   	     			dataType:'json',  
	   	     			data:{
	   	     				"tableCnName":$("#tableNameCnInput").val(),	
	   	     				"tableEnName":$("#tableNameEnInput").val()
	   	     			},
	   	     			type:"POST",
	   	     			success:function(response){
		   	     			if(response.code==0){
	   	 						eModal.close();	 
	   	 						loadTableContent(roleId);
	   	 					}else{
	   	 					    $.confirm({title: '提示!',text:"添加数据表!"});
	   	 					}
	   	     			}  
	   	     	    });
	   	            }},{text: '取消', style: 'danger', close: false, click:function(){
	   	            	eModal.close();
	   	            }}
	   	        ],
	   	    });
		}
	
	</script>
	
	</body>
</html>